<template>
  <div id="userInfoPage">
    <a-card class="userInfoCard" :bordered="true" :hoverable="true">
      <a-row :gutter="24" align="middle">
        <a-col :span="8" style="text-align: center">
          <a-avatar :size="128" :src="loginUser?.userAvatar" alt="暂无头像" class="user-avatar" />
          <h3 style="margin-top: 16px">{{ loginUser?.userName ?? '未知' }}</h3>
        </a-col>

        <a-col :span="16">
          <a-divider orientation="left" style="margin-top: 0">基本信息</a-divider>
          <a-descriptions bordered size="middle" :column="1" class="user-descriptions">
            <a-descriptions-item label="账号" :span="1">
              <a-tag color="blue">{{ loginUser?.userAccount ?? '未知' }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="性别">
              {{ loginUser?.gender ?? '未知' }}
            </a-descriptions-item>
            <a-descriptions-item label="用户角色">
              <a-tag color="purple">{{ loginUser?.userRole ?? '未知' }}</a-tag>
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { useLoginUserStore } from '@/stores/useLoginUserStore'
const loginUser = useLoginUserStore().loginUser
</script>

<style scoped>
#userInfoPage {
  margin-top: 16px;
  background: #f0f2f5;
  height: 83vh;
  padding: 24px;
}

.userInfoCard {
  width: 80%;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.user-avatar {
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-descriptions {
  margin-top: 16px;
}
</style>
